import { defineComponent } from 'vue'
import '../../styles/play-number-video.less'

export default defineComponent({
  setup() {
    const actorList = [
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fplc.jj20.com%2Fup%2Fallimg%2Fmx14%2F031121151458%2F210311151458-3.jpg&refer=http%3A%2F%2Fplc.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=73021487a2ca945945c222dc2a900722',
        name: '杨幂'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F1114201R407%2F2011141R407-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=148393f41354ce0237bdfffd1f890154',
        name: '戚薇'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg7.51tietu.net%2Fpic%2F2019-082100%2Fv0iqm1ggwo2v0iqm1ggwo2.jpg&refer=http%3A%2F%2Fimg7.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=94edd6e16cf392681ede845ed188ff49',
        name: '秦岚'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111520054J5%2F201115054J5-3.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=6fc7583927ff5ca144c0a57c4d565d5f',
        name: '高圆圆'
      }
    ]
    return () => (
      <div class="mt-6 overflow-hidden flex ml-4 actor-box pb-4">
        {actorList.map((item) => {
          return (
            <span class="flex flex-col text-center">
              <img src={item.url} alt="" key={item.name} class="w-[75px] h-[100px] rounded mr-2" />
              <span class="pt-1">{item.name}</span>
            </span>
          )
        })}
      </div>
    )
  }
})
